<template>
  <div class="comfirmOrder min-h-screen bg-hex-F6F6F6 from-hex-FFFFFF to-hex-F5F5F5 bg-gradient-to-b px-32rpx">
    <top-navbar title="确认订单" />
    <div>
      <div class="my-32rpx text-24rpx text-hex-50566B"><text class="mr-16rpx text-32rpx font-bold text-hex-282C3B">优惠券 </text>{{ couponNum }}张可用</div>
      <div>
        <div
          v-for="(item, index) in integralList"
          class="relative mb-24rpx box-border rounded-16rpx bg-hex-ffffff p-32rpx pt-48rpx"
          @click="changeCurrentIntegral(item, index)">
          <div class="mb-16rpx flex justify-between border-2rpx border-transparent border-b-hex-B0BCC8 border-dotted pb-24rpx">
            <div>
              <div class="mb-8rpx text-32rpx font-bold text-hex-000000">{{ item.couponTypeStr }}</div>
              <div class="text-24rpx text-hex-8995AD">{{ item.couponValidTimeStr }}</div>
            </div>
            <div class="flex">
              <div class="mr-32rpx text-hex-FF5A5A">
                <div class="font-numberFont mb-8rpx text-38rpx"><text class="text-24rpx">¥</text>{{ item.discountAmount }}</div>
                <div class="text-20rpx">{{ item.couponUseTypeStr }}</div>
              </div>
              <div class="h-77rpx w-77rpx flex items-center justify-center">
                <div v-if="!item.isSelect" class="h-32rpx w-32rpx border-4rpx border-hex-B0BCC8 rounded-50% border-solid" />
                <image
                  v-if="item.isSelect"
                  :src="`${cdnUrl}/svgicons/coupon/select.svg`"
                  mode="scaleToFill"
                  class="h-40rpx w-40rpx"
                />
              </div>
            </div>
          </div>
          <div class="flex justify-between text-24rpx text-hex-FF5A5A">
            <div class="w-90% truncate">本券以实际展示为主{{ item.couponUseTypeStr }}</div>
            <div>x{{ item.totalAmount }}</div>
          </div>
          <div class="bgcolor absolute left-0 top-0 box-border px-20rpx py-4rpx text-24rpx text-hex-ffffff">{{ item.couponTypeStr }}</div>
        </div>
      </div>
    </div>
    <div class="fixed bottom-0 left-0 right-0 rounded-t-24rpx bg-hex-ffffff px-32rpx py-44rpx">
      <div class="flex items-center justify-between">
        <div class="text-24rpx text-hex-333333">
          红包优惠 <text class="font-numberFont ml-8rpx font-bold">¥ {{ integralStore.currentSelectCoupon?.isSelect?integralStore.currentSelectCoupon.discountAmount : 0 }}</text>
        </div>
        <div
          class="rounded-46rpx bg-hex-E36043 px-108rpx py-16rpx text-28rpx text-hex-ffffff"
          @click="updateSelectIntegral">确认</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useIntegralStore } from '../stores/integral'

let integralStore = useIntegralStore()
let searchBarTop: any = $ref('24')
let productId: any = $ref('')
onLoad((options) => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
  if (options) {
    productId = options.productId
  }
  currentIntegral = integralStore.currentSelectCoupon
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let currentIntegral: any = $ref({})
let integralList: any = $ref([])
let couponNum: any = $ref(0)

const getIntegralList = async () => {
  integralList = integralStore.orderCouponList
  integralList = integralList.filter(item => item.couponShowStatus === 0)
  couponNum = integralList.reduce((sum, item) => sum + item.totalAmount, 0)
}

const changeCurrentIntegral = (item, idx) => {
  integralList.forEach((item, index) => {
    if (idx === index) {
      if (item.isSelect) {
        item.isSelect = false
      } else {
        item.isSelect = true
      }
    } else {
      item.isSelect = false
    }
  })
  currentIntegral = item
  integralStore.updateCurrenSelectCouopon(currentIntegral)
  integralStore.updateCouponList(integralList)
}

const updateSelectIntegral = async () => {
  if (currentIntegral.isSelect === true) {
    await integralStore.updateCouponText(`-¥${currentIntegral.discountAmount}`)
    await integralStore.updateCouponAmount(currentIntegral.discountAmount)
    await integralStore.updateSelectCoupon(currentIntegral)
  } else {
    await integralStore.updateCouponText(`${integralList.length}张可用`)
    await integralStore.updateCouponAmount(0)
    await integralStore.updateSelectCoupon('')
  }
  await goback()
}
onMounted(() => {
  getIntegralList()
  console.log(integralStore.currentSelectCoupon, '1111111111111111')

})

</script>

<style lang="scss" scoped>
.comfirmOrder{
  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }

  .bgcolor{
    background: linear-gradient(306deg, #FF4E4E 0%, #FB7515 100%);
    border-top-left-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
  }
}
</style>
